<template>
  <div class="user-settings">
    <div class="settings-content">
      <!-- 安全设置 -->
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <div class="title-section">
              <el-icon class="title-icon"><Shield /></el-icon>
              <span class="card-title">安全设置</span>
            </div>
          </div>
        </template>

        <div class="security-settings">
          <div class="security-section">
            <h3 class="section-title">
              <el-icon><Lock /></el-icon>
              账户安全
            </h3>
            <div class="security-grid">
              <div class="security-item">
                <div class="security-info">
                  <div class="security-icon password">
                    <el-icon><Key /></el-icon>
                  </div>
                  <div class="security-details">
                    <h4>登录密码</h4>
                    <p>定期更换密码可以让账户更安全</p>
                    <div class="security-status">
                      <el-tag type="success" effect="light" size="small">
                        <el-icon><SuccessFilled /></el-icon>
                        已设置
                      </el-tag>
                      <span class="update-time">最近更新：3个月前</span>
                    </div>
                  </div>
                </div>
                <el-button type="primary" @click="showChangePassword = true" class="action-btn">
                  <el-icon><Edit /></el-icon>
                  修改密码
                </el-button>
              </div>

              <div class="security-item">
                <div class="security-info">
                  <div class="security-icon twofa">
                    <el-icon><Lock /></el-icon>
                  </div>
                  <div class="security-details">
                    <h4>双重认证</h4>
                    <p>为您的账户添加额外安全层</p>
                    <div class="security-status">
                      <el-tag type="danger" effect="light" size="small">
                        <el-icon><WarningFilled /></el-icon>
                        未开启
                      </el-tag>
                    </div>
                  </div>
                </div>
                <el-button type="primary" @click="setupTwoFA" class="action-btn" plain>
                  <el-icon><Plus /></el-icon>
                  立即开启
                </el-button>
              </div>
            </div>
          </div>

          <div class="security-section">
            <h3 class="section-title">
              <el-icon><Link /></el-icon>
              绑定账户
            </h3>
            <div class="security-grid">
              <div class="security-item">
                <div class="security-info">
                  <div class="security-icon email" :class="{ 'unbound': !userInfo.email }">
                    <el-icon><Message /></el-icon>
                  </div>
                  <div class="security-details">
                    <h4>邮箱绑定</h4>
                    <p v-if="userInfo.email">已绑定：{{ userInfo.email }}</p>
                    <p v-else class="text-warning">未绑定邮箱</p>
                    <div class="security-status">
                      <el-tag :type="userInfo.email ? 'success' : 'warning'" effect="light" size="small">
                        {{ userInfo.email ? '已绑定' : '未绑定' }}
                      </el-tag>
                    </div>
                  </div>
                </div>
                <el-button 
                  :type="userInfo.email ? 'default' : 'primary'" 
                  @click="handleEmailSetting"
                  class="action-btn"
                  :plain="!!userInfo.email"
                >
                  <el-icon><Edit /></el-icon>
                  {{ userInfo.email ? '修改邮箱' : '绑定邮箱' }}
                </el-button>
              </div>

              <div class="security-item">
                <div class="security-info">
                  <div class="security-icon phone" :class="{ 'unbound': !userInfo.phone }">
                    <el-icon><Iphone /></el-icon>
                  </div>
                  <div class="security-details">
                    <h4>手机号</h4>
                    <p v-if="userInfo.phone">已绑定：{{ userInfo.phone }}</p>
                    <p v-else class="text-warning">未绑定手机号</p>
                    <div class="security-status">
                      <el-tag :type="userInfo.phone ? 'success' : 'warning'" effect="light" size="small">
                        {{ userInfo.phone ? '已绑定' : '未绑定' }}
                      </el-tag>
                    </div>
                  </div>
                </div>
                <el-button 
                  :type="userInfo.phone ? 'default' : 'primary'" 
                  @click="handlePhoneSetting"
                  class="action-btn"
                  :plain="!!userInfo.phone"
                >
                  <el-icon><Edit /></el-icon>
                  {{ userInfo.phone ? '修改手机号' : '绑定手机号' }}
                </el-button>
              </div>
            </div>
          </div>

          <div class="security-section">
            <h3 class="section-title">
              <el-icon><User /></el-icon>
              身份认证
            </h3>
            <div class="security-grid">
              <!-- 真实姓名设置 -->
              <div class="security-item">
                <div class="security-info">
                  <div class="security-icon idcard" :class="{ 'unbound': !userInfo.realName }">
                    <el-icon><User /></el-icon>
                  </div>
                  <div class="security-details">
                    <h4>真实姓名</h4>
                    <p v-if="userInfo.realName">已认证：{{ userInfo.realName }}</p>
                    <p v-else class="text-warning">未设置真实姓名</p>
                    <div class="security-status">
                      <el-tag :type="userInfo.realName ? 'success' : 'warning'" effect="light" size="small">
                        {{ userInfo.realName ? '已认证' : '未认证' }}
                      </el-tag>
                      <span v-if="userInfo.realNameUpdateTime" class="update-time">
                        认证时间：{{ formatTime(userInfo.realNameUpdateTime) }}
                      </span>
                    </div>
                  </div>
                </div>
                <el-button 
                  :type="userInfo.realName ? 'default' : 'primary'" 
                  @click="handleRealNameSetting"
                  class="action-btn"
                  :plain="!!userInfo.realName"
                >
                  <el-icon><Edit /></el-icon>
                  {{ userInfo.realName ? '修改姓名' : '认证姓名' }}
                </el-button>
              </div>

              <!-- 身份证号设置 -->
              <div class="security-item">
                <div class="security-info">
                  <div class="security-icon idnumber" :class="{ 'unbound': !userInfo.idCard }">
                    <el-icon><CreditCard /></el-icon>
                  </div>
                  <div class="security-details">
                    <h4>身份证号</h4>
                    <p v-if="userInfo.idCard">已认证：{{ maskIdCard(userInfo.idCard) }}</p>
                    <p v-else class="text-warning">未设置身份证号</p>
                    <div class="security-status">
                      <el-tag :type="userInfo.idCard ? 'success' : 'warning'" effect="light" size="small">
                        {{ userInfo.idCard ? '已认证' : '未认证' }}
                      </el-tag>
                      <span v-if="userInfo.idCardUpdateTime" class="update-time">
                        认证时间：{{ formatTime(userInfo.idCardUpdateTime) }}
                      </span>
                    </div>
                  </div>
                </div>
                <el-button 
                  :type="userInfo.idCard ? 'default' : 'primary'" 
                  @click="handleIdCardSetting"
                  class="action-btn"
                  :plain="!!userInfo.idCard"
                  :disabled="!userInfo.realName"
                >
                  <el-icon><Edit /></el-icon>
                  {{ userInfo.idCard ? '修改身份证' : '认证身份证' }}
                </el-button>
              </div>
            </div>
          </div>

          <div class="security-section">
            <h3 class="section-title">
              <el-icon><Monitor /></el-icon>
              登录设备管理
            </h3>
            <div class="devices-section">
              <div class="devices-header">
                <span class="devices-title">当前登录设备</span>
                <el-button type="danger" text @click="logoutAllDevices" class="logout-all-btn">
                  <el-icon><SwitchButton /></el-icon>
                  退出所有设备
                </el-button>
              </div>
              
              <div class="devices-list">
                <div 
                  v-for="device in loginDevices" 
                  :key="device.id"
                  class="device-item"
                  :class="{ 'current': device.isCurrent }"
                >
                  <div class="device-info">
                    <div class="device-icon">
                      <el-icon v-if="device.type === 'desktop'"><Monitor /></el-icon>
                      <el-icon v-else-if="device.type === 'mobile'"><Iphone /></el-icon>
                      <el-icon v-else><Laptop /></el-icon>
                    </div>
                    <div class="device-details">
                      <div class="device-name">
                        {{ device.name }}
                        <el-tag v-if="device.isCurrent" type="success" size="small" effect="light">
                          当前设备
                        </el-tag>
                      </div>
                      <div class="device-meta">
                        <span class="device-location">{{ device.location }}</span>
                        <span class="device-time">最后登录：{{ formatTime(device.lastLogin) }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="device-actions">
                    <el-button 
                      v-if="!device.isCurrent"
                      type="danger" 
                      text 
                      @click="logoutDevice(device.id)"
                      size="small"
                    >
                      退出登录
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="showChangePassword"
      title="修改密码"
      width="500px"
      :close-on-click-modal="false"
      class="custom-dialog"
    >
      <div class="dialog-header">
        <el-icon class="dialog-icon"><Key /></el-icon>
        <span>修改密码</span>
      </div>
      
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="100px"
        class="dialog-form"
      >
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            placeholder="请输入当前密码"
            show-password
            size="large"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            placeholder="请输入新密码"
            show-password
            size="large"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
            size="large"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="showChangePassword = false" size="large">取消</el-button>
        <el-button 
          type="primary" 
          @click="updatePassword" 
          :loading="changingPassword"
          size="large"
        >
          确定修改
        </el-button>
      </template>
    </el-dialog>

    <!-- 真实姓名认证对话框 -->
    <el-dialog
      v-model="showRealNameDialog"
      :title="userInfo.realName ? '修改真实姓名' : '认证真实姓名'"
      width="500px"
      :close-on-click-modal="false"
      class="custom-dialog"
    >
      <div class="dialog-header">
        <el-icon class="dialog-icon"><User /></el-icon>
        <span>{{ userInfo.realName ? '修改真实姓名' : '认证真实姓名' }}</span>
      </div>
      
      <el-form
        ref="realNameFormRef"
        :model="realNameForm"
        :rules="realNameRules"
        label-width="100px"
        class="dialog-form"
      >
        <el-form-item label="真实姓名" prop="realName">
          <el-input
            v-model="realNameForm.realName"
            placeholder="请输入您的真实姓名"
            size="large"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <div class="form-tips">
          <p>💡 温馨提示：</p>
          <ul>
            <li>请填写与身份证一致的姓名</li>
            <li>认证后30天内不可修改</li>
            <li>姓名信息将严格保密</li>
          </ul>
        </div>
      </el-form>
      
      <template #footer>
        <el-button @click="showRealNameDialog = false" size="large">取消</el-button>
        <el-button 
          type="primary" 
          @click="updateRealName" 
          :loading="submittingRealName"
          size="large"
        >
          {{ userInfo.realName ? '修改姓名' : '认证姓名' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 身份证认证对话框 -->
    <el-dialog
      v-model="showIdCardDialog"
      :title="userInfo.idCard ? '修改身份证号' : '认证身份证号'"
      width="500px"
      :close-on-click-modal="false"
      class="custom-dialog"
    >
      <div class="dialog-header">
        <el-icon class="dialog-icon"><CreditCard /></el-icon>
        <span>{{ userInfo.idCard ? '修改身份证号' : '认证身份证号' }}</span>
      </div>
      
      <el-form
        ref="idCardFormRef"
        :model="idCardForm"
        :rules="idCardRules"
        label-width="100px"
        class="dialog-form"
      >
        <el-form-item label="真实姓名">
          <el-input
            :value="userInfo.realName"
            disabled
            size="large"
          />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input
            v-model="idCardForm.idCard"
            placeholder="请输入您的身份证号码"
            size="large"
            maxlength="18"
            show-word-limit
          />
        </el-form-item>
        <div class="form-tips">
          <p>🔒 安全提示：</p>
          <ul>
            <li>请确保姓名与身份证信息一致</li>
            <li>身份证信息将加密存储</li>
            <li>仅用于身份验证，不会泄露</li>
          </ul>
        </div>
      </el-form>
      
      <template #footer>
        <el-button @click="showIdCardDialog = false" size="large">取消</el-button>
        <el-button 
          type="primary" 
          @click="updateIdCard" 
          :loading="submittingIdCard"
          size="large"
        >
          {{ userInfo.idCard ? '修改身份证' : '认证身份证' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 邮箱设置对话框 -->
    <el-dialog
      v-model="showEmailSetting"
      :title="userInfo.email ? '修改邮箱' : '绑定邮箱'"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="emailFormRef"
        :model="emailForm"
        :rules="emailRules"
        label-width="80px"
      >
        <el-form-item label="邮箱地址" prop="email">
          <el-input
            v-model="emailForm.email"
            placeholder="请输入邮箱地址"
            :disabled="!!userInfo.email"
          />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <div class="code-input">
            <el-input
              v-model="emailForm.code"
              placeholder="请输入验证码"
              style="margin-right: 10px"
            />
            <el-button 
              type="primary" 
              :disabled="!emailForm.email || codeCountdown > 0"
              @click="sendEmailCode"
            >
              {{ codeCountdown > 0 ? `${codeCountdown}秒后重发` : '发送验证码' }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="showEmailSetting = false">取消</el-button>
        <el-button type="primary" @click="updateEmail" :loading="submitting">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Lock, Key, Message, Iphone, Monitor, 
  Edit, Plus, SuccessFilled, WarningFilled, SwitchButton,
  User, CreditCard
} from '@element-plus/icons-vue'

// 响应式数据
const showChangePassword = ref(false)
const showEmailSetting = ref(false)
const showRealNameDialog = ref(false)
const showIdCardDialog = ref(false)
const changingPassword = ref(false)
const submitting = ref(false)
const submittingRealName = ref(false)
const submittingIdCard = ref(false)
const codeCountdown = ref(0)

const passwordFormRef = ref(null)
const emailFormRef = ref(null)
const realNameFormRef = ref(null)
const idCardFormRef = ref(null)

// 用户信息
const userInfo = ref({
  email: 'zhangsan@example.com',
  phone: '138****1234',
  realName: '张三',
  idCard: '110101199001011234',
  realNameUpdateTime: '2024-01-15T10:00:00Z',
  idCardUpdateTime: '2024-01-15T10:30:00Z'
})

// 表单数据
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const emailForm = reactive({
  email: '',
  code: ''
})

const realNameForm = reactive({
  realName: ''
})

const idCardForm = reactive({
  idCard: ''
})

// 登录设备列表
const loginDevices = ref([
  {
    id: 1,
    name: 'Windows Chrome',
    type: 'desktop',
    location: '北京',
    lastLogin: '2024-12-01T15:30:00Z',
    isCurrent: true
  },
  {
    id: 2,
    name: 'iPhone Safari',
    type: 'mobile',
    location: '上海',
    lastLogin: '2024-11-28T10:20:00Z',
    isCurrent: false
  },
  {
    id: 3,
    name: 'Mac Safari',
    type: 'desktop',
    location: '深圳',
    lastLogin: '2024-11-25T09:15:00Z',
    isCurrent: false
  }
])

// 密码验证规则
const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const emailRules = {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码为6位数字', trigger: 'blur' }
  ]
}

// 真实姓名验证规则
const realNameRules = {
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度为2-10个字符', trigger: 'blur' },
    { 
      pattern: /^[\u4e00-\u9fa5]{2,10}$/, 
      message: '请输入有效的中文姓名', 
      trigger: 'blur' 
    }
  ]
}

// 身份证验证规则
const idCardRules = {
  idCard: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    { len: 18, message: '身份证号码为18位', trigger: 'blur' },
    { 
      pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      message: '请输入有效的身份证号码',
      trigger: 'blur'
    }
  ]
}

// 方法
const formatTime = (timeString) => {
  if (!timeString) return '-'
  return new Date(timeString).toLocaleString('zh-CN')
}

const maskIdCard = (idCard) => {
  if (!idCard) return ''
  return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
}

const updatePassword = async () => {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    changingPassword.value = true
    
    // 模拟修改密码API
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('密码修改成功')
    showChangePassword.value = false
    passwordFormRef.value.resetFields()
  } catch (error) {
    console.error('修改密码失败:', error)
  } finally {
    changingPassword.value = false
  }
}

const setupTwoFA = () => {
  ElMessage.info('双重认证功能开发中...')
}

const handleEmailSetting = () => {
  emailForm.email = userInfo.value.email || ''
  emailForm.code = ''
  showEmailSetting.value = true
}

const sendEmailCode = async () => {
  if (!emailForm.email) {
    ElMessage.warning('请输入邮箱地址')
    return
  }
  
  try {
    // 模拟发送验证码API
    // await sendEmailCodeApi(emailForm.email)
    ElMessage.success('验证码已发送到您的邮箱')
    
    // 开始倒计时
    codeCountdown.value = 60
    const timer = setInterval(() => {
      codeCountdown.value--
      if (codeCountdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  } catch (error) {
    console.error('发送验证码失败:', error)
    ElMessage.error('发送验证码失败')
  }
}

const updateEmail = async () => {
  if (!emailFormRef.value) return
  
  try {
    await emailFormRef.value.validate()
    submitting.value = true
    
    // 模拟API调用
    // await updateEmailApi(emailForm)
    userInfo.value.email = emailForm.email
    ElMessage.success('邮箱绑定成功')
    showEmailSetting.value = false
  } catch (error) {
    console.error('绑定邮箱失败:', error)
  } finally {
    submitting.value = false
  }
}

const handlePhoneSetting = () => {
  ElMessage.info('手机号绑定功能开发中...')
}

const logoutDevice = async (deviceId) => {
  try {
    await ElMessageBox.confirm(
      '确定要退出该设备的登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    loginDevices.value = loginDevices.value.filter(device => device.id !== deviceId)
    ElMessage.success('设备已退出登录')
  } catch (error) {
    // 用户取消操作
  }
}

const logoutAllDevices = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出所有设备的登录吗？当前设备也会退出登录。',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--danger'
      }
    )
    
    ElMessage.success('所有设备已退出登录')
    // 这里应该调用API退出所有设备，然后重定向到登录页
  } catch (error) {
    // 用户取消操作
  }
}

// 身份认证相关方法
const updateRealName = async () => {
  if (!realNameFormRef.value) return
  
  try {
    await realNameFormRef.value.validate()
    submittingRealName.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    userInfo.value.realName = realNameForm.realName
    userInfo.value.realNameUpdateTime = new Date().toISOString()
    
    ElMessage.success('真实姓名认证成功')
    showRealNameDialog.value = false
    
    // 如果之前有身份证信息，清空（因为姓名变了）
    if (userInfo.value.idCard) {
      userInfo.value.idCard = ''
      userInfo.value.idCardUpdateTime = ''
      ElMessage.warning('由于姓名变更，请重新认证身份证')
    }
  } catch (error) {
    console.error('认证真实姓名失败:', error)
  } finally {
    submittingRealName.value = false
  }
}

const updateIdCard = async () => {
  if (!idCardFormRef.value) return
  
  try {
    await idCardFormRef.value.validate()
    submittingIdCard.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    userInfo.value.idCard = idCardForm.idCard
    userInfo.value.idCardUpdateTime = new Date().toISOString()
    
    ElMessage.success('身份证认证成功')
    showIdCardDialog.value = false
  } catch (error) {
    console.error('认证身份证失败:', error)
  } finally {
    submittingIdCard.value = false
  }
}

// 打开对话框时初始化表单数据
const handleRealNameSetting = () => {
  realNameForm.realName = userInfo.value.realName || ''
  showRealNameDialog.value = true
}

const handleIdCardSetting = () => {
  if (!userInfo.value.realName) {
    ElMessage.warning('请先认证真实姓名')
    showRealNameDialog.value = true
    return
  }
  idCardForm.idCard = userInfo.value.idCard || ''
  showIdCardDialog.value = true
}
</script>

<style scoped>
.user-settings {
  width: 100%;
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  min-height: 100vh;
}

.settings-content {
  max-width: 1000px;
  margin: 0 auto;
}

.settings-card {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: none;
  overflow: hidden;
  background: white;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 24px;
  color: white;
}

.card-title {
  font-size: 20px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.5px;
}

/* 安全设置样式 */
.security-settings {
  padding: 8px 0;
}

.security-section {
  margin-bottom: 40px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 24px 0;
  padding: 16px 24px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-radius: 12px;
  border-left: 4px solid #667eea;
}

.section-title .el-icon {
  color: #667eea;
  font-size: 20px;
}

.security-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px;
  background: white;
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.security-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #667eea;
}

.security-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.security-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.security-icon.password {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.security-icon.twofa {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.security-icon.email {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}

.security-icon.email.unbound {
  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
}

.security-icon.phone {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #2d3748;
}

.security-icon.phone.unbound {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

/* 身份认证图标样式 */
.security-icon.idcard {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.security-icon.idcard.unbound {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.security-icon.idnumber {
  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
}

.security-icon.idnumber.unbound {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.security-details h4 {
  margin: 0 0 8px 0;
  color: #2d3748;
  font-size: 18px;
  font-weight: 600;
}

.security-details p {
  margin: 0 0 12px 0;
  color: #718096;
  font-size: 14px;
  line-height: 1.5;
}

.security-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.update-time {
  font-size: 12px;
  color: #a0aec0;
}

.text-warning {
  color: #e53e3e;
}

.action-btn {
  padding: 10px 24px;
  border-radius: 12px;
  font-weight: 600;
  min-width: 120px;
}

/* 设备管理样式 */
.devices-section {
  padding: 0 24px;
}

.devices-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.devices-title {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}

.logout-all-btn {
  color: #e53e3e;
  font-weight: 500;
}

.devices-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.device-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.device-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.device-item.current {
  border-color: #48bb78;
  background: linear-gradient(135deg, #f0fff4 0%, #e6fffa 100%);
}

.device-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.device-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.device-details {
  flex: 1;
}

.device-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 6px;
}

.device-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #718096;
}

.device-location {
  position: relative;
  padding-right: 16px;
}

.device-location::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: #cbd5e0;
  border-radius: 50%;
}

.device-actions {
  flex-shrink: 0;
}

/* 对话框样式 */
.custom-dialog {
  border-radius: 20px;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-icon {
  font-size: 24px;
  color: #667eea;
}

.dialog-form {
  padding: 20px 0;
}

/* 表单提示样式 */
.form-tips {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  color: #606266;
}

.form-tips p {
  margin: 0 0 8px 0;
  font-weight: 500;
  color: #667eea;
}

.form-tips ul {
  margin: 0;
  padding-left: 20px;
}

.form-tips li {
  margin-bottom: 4px;
  color: #718096;
}

/* 验证码输入样式 */
.code-input {
  display: flex;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-settings {
    padding: 16px;
  }
  
  .security-item {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px;
  }
  
  .security-info {
    gap: 16px;
  }
  
  .security-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .security-details h4 {
    font-size: 16px;
  }
  
  .security-details p {
    font-size: 13px;
  }
  
  .devices-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .device-item {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .device-meta {
    flex-direction: column;
    gap: 4px;
  }
  
  .device-location::after {
    display: none;
  }
  
  .section-title {
    font-size: 16px;
    padding: 12px 20px;
  }
  
  .security-grid {
    padding: 0 16px;
  }
  
  .devices-section {
    padding: 0 16px;
  }
}
</style>